import React, {Component} from 'react';
import img from '../static/image/1.jpg'
class LifeCycle extends Component{
    constructor(props){
        super(props)
        this.state = {
            title:'fuxing'    
        }
       console.log('挂载----constructor')     
    }

    static getDerivedStateFromProps(){
        console.log('挂载/更新----getDerivedStateFromProps')     
        return null
    }

    render(){
       console.log('render')     
       return(
       <div>
          <h1 onClick={() => this.setState({title:'符幸'})}>{this.state.title}</h1>  
          <h2 onClick={() => this.props.history.push("/page001")}>跳转-测试卸载</h2>
          <img src={img}></img>
       </div>)     
    }

    componentDidMount(){
        console.log('挂载----componentDidMount')     
        
    }



    // 如果你的组件只有当state.title 的值改变才需要更新时，你可以使用 shouldComponentUpdate 来进行检查：
    shouldComponentUpdate(nextProps, nextState){ 
        console.log('更新----shouldComponentUpdate')   
        if(this.state.title !== nextState.title)  {
            return true
        }
        return false
    } 

    getSnapshotBeforeUpdate(){ 
        console.log('更新----getSnapshotBeforeUpdate')    
        return null 
    }

    componentDidUpdate(){
        console.log('更新----componentDidUpdate')     
        
    }
  
    //卸载 
    componentWillUnmount(){
        console.log('卸载----componentWillUnmount')     
    }


}

export default LifeCycle